import cn from "classnames";
import React, { HTMLAttributes, PropsWithChildren } from "react";
import styles from "./Icon.scss";

export type IconName = CodiconName | MoniconName;

export type MoniconName = "mono-firebase";

export type CodiconName =
  | "account"
  | "activate-breakpoints"
  | "add"
  | "archive"
  | "arrow-both"
  | "arrow-circle-down"
  | "arrow-circle-left"
  | "arrow-circle-right"
  | "arrow-circle-up"
  | "arrow-down"
  | "arrow-left"
  | "arrow-right"
  | "arrow-small-down"
  | "arrow-small-left"
  | "arrow-small-right"
  | "arrow-small-up"
  | "arrow-swap"
  | "arrow-up"
  | "azure-devops"
  | "azure"
  | "beaker-stop"
  | "beaker"
  | "bell-dot"
  | "bell"
  | "bold"
  | "book"
  | "bookmark"
  | "bracket-dot"
  | "bracket-error"
  | "briefcase"
  | "broadcast"
  | "browser"
  | "bug"
  | "calendar"
  | "call-incoming"
  | "call-outgoing"
  | "case-sensitive"
  | "check-all"
  | "check"
  | "checklist"
  | "chevron-down"
  | "chevron-left"
  | "chevron-right"
  | "chevron-up"
  | "chrome-close"
  | "chrome-maximize"
  | "chrome-minimize"
  | "chrome-restore"
  | "circle-filled"
  | "circle-large-filled"
  | "circle-large-outline"
  | "circle-outline"
  | "circle-slash"
  | "circuit-board"
  | "clear-all"
  | "clippy"
  | "close-all"
  | "close"
  | "cloud-download"
  | "cloud-upload"
  | "cloud"
  | "code"
  | "collapse-all"
  | "color-mode"
  | "combine"
  | "comment-discussion"
  | "comment"
  | "compass-active"
  | "compass-dot"
  | "compass"
  | "copy"
  | "credit-card"
  | "dash"
  | "dashboard"
  | "database"
  | "debug-all"
  | "debug-alt-small"
  | "debug-alt"
  | "debug-breakpoint-conditional-unverified"
  | "debug-breakpoint-conditional"
  | "debug-breakpoint-data-unverified"
  | "debug-breakpoint-data"
  | "debug-breakpoint-function-unverified"
  | "debug-breakpoint-function"
  | "debug-breakpoint-log-unverified"
  | "debug-breakpoint-log"
  | "debug-breakpoint-unsupported"
  | "debug-console"
  | "debug-continue-small"
  | "debug-continue"
  | "debug-coverage"
  | "debug-disconnect"
  | "debug-line-by-line"
  | "debug-pause"
  | "debug-rerun"
  | "debug-restart-frame"
  | "debug-restart"
  | "debug-reverse-continue"
  | "debug-stackframe-active"
  | "debug-stackframe-dot"
  | "debug-stackframe"
  | "debug-start"
  | "debug-step-back"
  | "debug-step-into"
  | "debug-step-out"
  | "debug-step-over"
  | "debug-stop"
  | "debug"
  | "desktop-download"
  | "device-camera-video"
  | "device-camera"
  | "device-mobile"
  | "diff-added"
  | "diff-ignored"
  | "diff-modified"
  | "diff-removed"
  | "diff-renamed"
  | "diff"
  | "discard"
  | "edit"
  | "editor-layout"
  | "ellipsis"
  | "empty-window"
  | "error-small"
  | "error"
  | "exclude"
  | "expand-all"
  | "export"
  | "extensions"
  | "eye-closed"
  | "eye"
  | "feedback"
  | "file-binary"
  | "file-code"
  | "file-media"
  | "file-pdf"
  | "file-submodule"
  | "file-symlink-directory"
  | "file-symlink-file"
  | "file-zip"
  | "file"
  | "files"
  | "filter-filled"
  | "filter"
  | "flame"
  | "fold-down"
  | "fold-up"
  | "fold"
  | "folder-active"
  | "folder-library"
  | "folder-opened"
  | "folder"
  | "gear"
  | "gift"
  | "gist-secret"
  | "git-commit"
  | "git-compare"
  | "git-merge"
  | "git-pull-request-closed"
  | "git-pull-request-create"
  | "git-pull-request-draft"
  | "git-pull-request"
  | "github-action"
  | "github-alt"
  | "github-inverted"
  | "github"
  | "globe"
  | "go-to-file"
  | "grabber"
  | "graph-left"
  | "graph-line"
  | "graph-scatter"
  | "graph"
  | "gripper"
  | "group-by-ref-type"
  | "heart"
  | "history"
  | "home"
  | "horizontal-rule"
  | "hubot"
  | "inbox"
  | "indent"
  | "info"
  | "inspect"
  | "issue-draft"
  | "issue-reopened"
  | "issues"
  | "italic"
  | "jersey"
  | "json"
  | "kebab-vertical"
  | "key"
  | "law"
  | "layers-active"
  | "layers-dot"
  | "layers"
  | "layout-activitybar-left"
  | "layout-activitybar-right"
  | "layout-centered"
  | "layout-menubar"
  | "layout-panel-center"
  | "layout-panel-justify"
  | "layout-panel-left"
  | "layout-panel-off"
  | "layout-panel-right"
  | "layout-panel"
  | "layout-sidebar-left-off"
  | "layout-sidebar-left"
  | "layout-sidebar-right-off"
  | "layout-sidebar-right"
  | "layout-statusbar"
  | "layout"
  | "library"
  | "lightbulb-autofix"
  | "lightbulb"
  | "link-external"
  | "link"
  | "list-filter"
  | "list-flat"
  | "list-ordered"
  | "list-selection"
  | "list-tree"
  | "list-unordered"
  | "live-share"
  | "loading"
  | "location"
  | "lock-small"
  | "lock"
  | "magnet"
  | "mail-read"
  | "mail"
  | "markdown"
  | "megaphone"
  | "mention"
  | "menu"
  | "merge"
  | "milestone"
  | "mirror"
  | "mortar-board"
  | "move"
  | "multiple-windows"
  | "mute"
  | "new-file"
  | "new-folder"
  | "newline"
  | "no-newline"
  | "note"
  | "notebook-template"
  | "notebook"
  | "octoface"
  | "open-preview"
  | "organization"
  | "output"
  | "package"
  | "paintcan"
  | "pass-filled"
  | "pass"
  | "person-add"
  | "person"
  | "pie-chart"
  | "pin"
  | "pinned-dirty"
  | "pinned"
  | "play-circle"
  | "play"
  | "plug"
  | "preserve-case"
  | "preview"
  | "primitive-square"
  | "project"
  | "pulse"
  | "question"
  | "quote"
  | "radio-tower"
  | "reactions"
  | "record-keys"
  | "record-small"
  | "record"
  | "redo"
  | "references"
  | "refresh"
  | "regex"
  | "remote-explorer"
  | "remote"
  | "remove"
  | "replace-all"
  | "replace"
  | "reply"
  | "repo-clone"
  | "repo-force-push"
  | "repo-forked"
  | "repo-pull"
  | "repo-push"
  | "repo"
  | "report"
  | "request-changes"
  | "rocket"
  | "root-folder-opened"
  | "root-folder"
  | "rss"
  | "ruby"
  | "run-above"
  | "run-all"
  | "run-below"
  | "run-errors"
  | "save-all"
  | "save-as"
  | "save"
  | "screen-full"
  | "screen-normal"
  | "search-stop"
  | "search"
  | "server-environment"
  | "server-process"
  | "server"
  | "settings-gear"
  | "settings"
  | "shield"
  | "sign-in"
  | "sign-out"
  | "smiley"
  | "sort-precedence"
  | "source-control"
  | "split-horizontal"
  | "split-vertical"
  | "squirrel"
  | "star-empty"
  | "star-full"
  | "star-half"
  | "stop-circle"
  | "symbol-array"
  | "symbol-boolean"
  | "symbol-class"
  | "symbol-color"
  | "symbol-constant"
  | "symbol-enum-member"
  | "symbol-enum"
  | "symbol-event"
  | "symbol-field"
  | "symbol-file"
  | "symbol-interface"
  | "symbol-key"
  | "symbol-keyword"
  | "symbol-method"
  | "symbol-misc"
  | "symbol-namespace"
  | "symbol-numeric"
  | "symbol-operator"
  | "symbol-parameter"
  | "symbol-property"
  | "symbol-ruler"
  | "symbol-snippet"
  | "symbol-string"
  | "symbol-structure"
  | "symbol-variable"
  | "sync-ignored"
  | "sync"
  | "table"
  | "tag"
  | "target"
  | "tasklist"
  | "telescope"
  | "terminal-bash"
  | "terminal-cmd"
  | "terminal-debian"
  | "terminal-linux"
  | "terminal-powershell"
  | "terminal-tmux"
  | "terminal-ubuntu"
  | "terminal"
  | "text-size"
  | "three-bars"
  | "thumbsdown"
  | "thumbsup"
  | "tools"
  | "trash"
  | "triangle-down"
  | "triangle-left"
  | "triangle-right"
  | "triangle-up"
  | "twitter"
  | "type-hierarchy-sub"
  | "type-hierarchy-super"
  | "type-hierarchy"
  | "unfold"
  | "ungroup-by-ref-type"
  | "unlock"
  | "unmute"
  | "unverified"
  | "variable-group"
  | "verified-filled"
  | "verified"
  | "versions"
  | "vm-active"
  | "vm-connect"
  | "vm-outline"
  | "vm-running"
  | "vm"
  | "wand"
  | "warning"
  | "watch"
  | "whitespace"
  | "whole-word"
  | "window"
  | "word-wrap"
  | "workspace-trusted"
  | "workspace-unknown"
  | "workspace-untrusted"
  | "zoom-in"
  | "zoom-out";

type IconProps<T> = PropsWithChildren<
  T &
    HTMLAttributes<HTMLElement> & {
      icon: IconName;
    }
>;

export const Icon: React.FC<IconProps<{}>> = ({
  icon,
  className,
  ...props
}) => {
  let mono = icon.startsWith("mono-");
  return mono ? (
    <span className={cn(className, styles.monicon)} {...props}>
      {icon}
    </span>
  ) : (
    <div className={cn(className, "codicon", `codicon-${icon}`)} {...props} />
  );
};
